/******************************************************************************
* File description: MaintenanceYingGuang2ShuiPingJianCeTable.qml
* Function: 维护-荧光检测：水平检测位置校正表格
* Current Version: 1.0.0
* Author: 张宇轩
* Date: 2024-08-29
*  -----
*  Copyright by 博坤生物 .
 *****************************************************************************/
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import Qt.labs.qmlmodels 1.0

Rectangle {
    id: root

    /* property 定义开始 */
    property int plateRowCount: 1 // 反应板行数
    property int plateColCount: 12 // 反应板列数
    // 字母表
    property var alphabetList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
    // 横向表头高
    property int horizontalHeaderHeight: 40
    // 纵向表头宽
    property int verticalHeaderWidth: 65
    // 左上角角落
    property string cornerColor: "#FFEBF3FF"
    property int cornerBorderWidth: 0
    property string cornerBorderColor: "transparent"
    // 表格数据
    property var tableModels: []

    // private
    property int _itemIndex: 0 // 记录每个代理对象的下表，反推出所在行列
    property var _startPoint: [-1, -1] // 记录起点坐标
    property var _endPoint: [-1, -1] // 记录终点坐标
    property bool _isPressed: false // 鼠标按下信号
    property int _curMouseRow: -1 // 鼠标当前所在行
    property int _curMouseCol: -1 // 鼠标当前所在列
    property var _tableModel: root.tableModels

    // 信号
    signal pressedIndex(int index) // 发送表格下标信号

    // 函数
    // 下标转行列
    function index2RowCol(index){
        return [parseInt(index / plateColCount), index % plateColCount]
    }

    // 行列转下标
    function rowCol2Index(row, col){
        return row * plateColCount + col
    }

    /* property 定义结束 */

    GLOBAL{id: global}

    width: parent.width
    height: horizontalHeader.height + verticalHeader.height
    color: "#FFEBF3FF"
    clip: true
    border.width: 1
    border.color: "transparent"

    // 横向表头
    Item {
        id: horizontalHeader
        width: parent.width - verticalHeader.width
        height: horizontalHeaderHeight
        anchors {
            top: parent.top
            left: parent.left
            leftMargin: verticalHeader.width
        }

        Row {
            spacing: 0

            Repeater {
                model: plateColCount

                Rectangle {
                    width: horizontalHeader.width / plateColCount
                    height: horizontalHeader.height
                    color: "transparent"
                    border.width: 0

                    Text {
                        text: qsTr((index+1).toString())
                        anchors.centerIn: parent
                        font.pixelSize: 16
                        font.family: "Alibaba PuHuiTi"
                        color: "#FF222222"
                    }

                    Component.onCompleted: {
                        // 画边框
                        global.createLeftBorder(this, 2, "#FFCCCCCC")
                        global.createTopBorder(this, 2, "#FFCCCCCC")
                    }
                }
            }
        }
    }

    // 纵向表头
    Item {
        id: verticalHeader
        width: verticalHeaderWidth
        height: horizontalHeaderHeight
        anchors {
            top: parent.top
            left: parent.left
            topMargin: horizontalHeaderHeight
        }

        Rectangle {
            width: verticalHeader.width
            height: verticalHeader.height / plateRowCount
            color: "transparent"
            border.width: 0

            Text {
                text: qsTr("位置\n(mm)")
                anchors.centerIn: parent
                font.pixelSize: 16
                font.family: "Alibaba PuHuiTi"
                color: "#FF222222"
                horizontalAlignment: Text.AlignHCenter
            }

            Component.onCompleted: {
                // 画上边框
                global.createTopBorder(this, 2, "#FFCCCCCC")
                // 结尾画下边框
                global.createBottomBorder(this, 2, "#FFCCCCCC")
            }
        }
    }

    // 左上角
    Rectangle {
        id: leftTopCorner
        width: verticalHeader.width
        height: horizontalHeader.height
        anchors {
            top: parent.top
            left: parent.left
            right: horizontalHeader.left
            bottom: verticalHeader.top
        }
        color: root.cornerColor
        border.width: root.cornerBorderWidth
        border.color: root.cornerBorderColor

        // 绘制框线
        Component.onCompleted: {
            global.createTopBorder(this, 2, "#FFCCCCCC")
        }
    }

    // 表格内容
    TableView {
        id: tableContent
        width: horizontalHeader.width
        height: verticalHeader.height
        anchors {
            top: parent.top
            left: parent.left
            topMargin: horizontalHeader.height
            leftMargin: verticalHeader.width
        }
        clip: true
        boundsBehavior: Flickable.StopAtBounds
        columnSpacing: 0
        rowSpacing: 0

        columnWidthProvider: function(column){
            return tableContent.width / plateColCount
        }

        rowHeightProvider: function(row){
            return tableContent.height / plateRowCount
        }

        onWidthChanged: {
            forceLayout() // 强制重新布局刷新视图
        }

        onHeightChanged: {
            forceLayout() // 强制重新布局刷新视图
        }

        model: TableModel {
            id: tableModel

            TableModelColumn {display: "A"}
            TableModelColumn {display: "B"}
            TableModelColumn {display: "C"}
            TableModelColumn {display: "D"}
            TableModelColumn {display: "E"}
            TableModelColumn {display: "F"}
            TableModelColumn {display: "G"}
            TableModelColumn {display: "H"}
            TableModelColumn {display: "I"}
            TableModelColumn {display: "J"}
            TableModelColumn {display: "K"}
            TableModelColumn {display: "L"}

            rows: root._tableModel
        }

        delegate: Rectangle{
            id: tableDelegate

            // 保存变量
            property int curRow: row
            property int curCol: column
            // 边框
            property QtObject leftBorder: null
            property QtObject topBorder: null
            property QtObject bottomBorder: null

            implicitWidth: tableContent.columnWidthProvider(column)
            implicitHeight: tableContent.rowHeightProvider(row)
            color: "transparent"

            Component.onCompleted: {
                // 边框
                tableDelegate.leftBorder = global.createLeftBorder(this, 2, "#FFCCCCCC")
                tableDelegate.topBorder = global.createTopBorder(this, 2, "#FFCCCCCC")
                tableDelegate.bottomBorder = global.createBottomBorder(this, 2, "#FFCCCCCC", row === root.plateRowCount-1)
            }

            // 槽函数
            Connections {
                target: root
                // 点击表格事件
                function onPressedIndex(index){
                    var [posRow, posCol] = root.index2RowCol(index)
                    // 设置起始下标和结束下标
                    var startRowIndex = Math.min(posRow, root._startPoint[0])
                    var endRowIndex = Math.max(posRow, root._startPoint[0])
                    var startColIndex = Math.min(posCol, root._startPoint[1])
                    var endColIndex = Math.max(posCol, root._startPoint[1])
                    // 各个边框颜色
                    var leftBorderColor = tableDelegate.leftBorder.color
                    var topBorderColor = tableDelegate.topBorder.color
                    var bottomBorderColor = tableDelegate.bottomBorder.color
                    // 背景颜色
                    var bgColor = tableDelegate.color

                    // 背景
                    if(tableDelegate.curRow >= startRowIndex && tableDelegate.curRow <= endRowIndex &&
                            tableDelegate.curCol >= startColIndex && tableDelegate.curCol <= endColIndex) {
                        // 颜色不同则渲染
                        if(bgColor !== "#1A2F42CD") tableDelegate.color = "#1A2F42CD"
                    }else {
                        // 颜色不同则渲染
                        if(bgColor != "transparent") tableDelegate.color = "transparent"
                    }

                    // 边框
                    // 上边框
                    if(tableDelegate.curRow === startRowIndex &&
                            tableDelegate.curCol >= startColIndex && tableDelegate.curCol <= endColIndex){
                        // 修改颜色
                        tableDelegate.topBorder.color = "#FF2F42CD"
                    }else {
                        tableDelegate.topBorder.color = "#FFCCCCCC"
                    }
                    // 左边框
                    if(tableDelegate.curCol === startColIndex &&
                            tableDelegate.curRow >= startRowIndex && tableDelegate.curRow <= endRowIndex){
                        // 修改颜色
                        tableDelegate.leftBorder.color = "#FF2F42CD"
                    }else {
                        tableDelegate.leftBorder.color = "#FFCCCCCC"
                    }
                    // 右边框
                    // 判断不为左边框
                    if(tableDelegate.curCol !== startColIndex) {
                        // 右一个表格的左边框
                        if(tableDelegate.curCol === endColIndex+1 &&
                                tableDelegate.curRow >= startRowIndex && tableDelegate.curRow <= endRowIndex){
                            // 修改颜色
                            tableDelegate.leftBorder.color = "#FF2F42CD"
                        }else {
                            tableDelegate.leftBorder.color = "#FFCCCCCC"
                        }
                    }
                    // 下边框
                    // 判断不为上边框
                    if(tableDelegate.curRow !== startRowIndex) {
                        // 下一个表格的上边框
                        if(tableDelegate.curRow === endRowIndex+1 &&
                                tableDelegate.curCol >= startColIndex && tableDelegate.curCol <= endColIndex){
                            // 修改颜色
                            tableDelegate.topBorder.color = "#FF2F42CD"
                        }else {
                            tableDelegate.topBorder.color = "#FFCCCCCC"
                        }
                    }
                    // 真正的下边框（只有最后一行元素存在）
                    if(tableDelegate.curRow === endRowIndex &&
                            tableDelegate.curCol >= startColIndex && tableDelegate.curCol <= endColIndex) {
                        // 修改颜色
                        tableDelegate.bottomBorder.color = "#FF2F42CD"
                    }else {
                        tableDelegate.bottomBorder.color = "#FFCCCCCC"
                    }

                    // 重新绘制边框
                    // 颜色不同则渲染
                    if(leftBorderColor !== tableDelegate.leftBorder.color) tableDelegate.leftBorder.requestPaint()
                    if(topBorderColor !== tableDelegate.topBorder.color) tableDelegate.topBorder.requestPaint()
                    if(bottomBorderColor !== tableDelegate.bottomBorder.color) tableDelegate.bottomBorder.requestPaint()
                }
            }
        }

        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onPressed: {
                var mouseX = mouse.x
                var mouseY = mouse.y
                // 边界判断
                if(mouseX >= parent.width) mouseX = parent.width - 1
                if(mouseY >= parent.height) mouseY = parent.height - 1
                if(mouseX < 0) mouseX = 0
                if(mouseY < 0) mouseY = 0
                // 设置值
                _curMouseRow = parseInt(mouseY / tableContent.rowHeightProvider(0)) > plateRowCount ?
                            plateRowCount : parseInt(mouseY / tableContent.rowHeightProvider(0))
                _curMouseCol = parseInt(mouseX / tableContent.columnWidthProvider(0)) > plateColCount ?
                            plateColCount : parseInt(mouseX / tableContent.columnWidthProvider(0))
                _startPoint = [_curMouseRow, _curMouseCol]
                root.pressedIndex(rowCol2Index(_curMouseRow, _curMouseCol))
                _isPressed = true
            }
            onPositionChanged: {
                if(_isPressed){
                    var mouseX = mouse.x
                    var mouseY = mouse.y
                    // 边界判断
                    if(mouseX >= parent.width) mouseX = parent.width - 1
                    if(mouseY >= parent.height) mouseY = parent.height - 1
                    if(mouseX < 0) mouseX = 0
                    if(mouseY < 0) mouseY = 0
                    // 设置值
                    _curMouseRow = parseInt(mouseY / tableContent.rowHeightProvider(0)) > plateRowCount ?
                                plateRowCount : parseInt(mouseY / tableContent.rowHeightProvider(0))
                    _curMouseCol = parseInt(mouseX / tableContent.columnWidthProvider(0)) > plateColCount ?
                                plateColCount : parseInt(mouseX / tableContent.columnWidthProvider(0))
                    root.pressedIndex(rowCol2Index(_curMouseRow, _curMouseCol))
                }
            }
            onReleased: {
                var mouseX = mouse.x
                var mouseY = mouse.y
                // 边界判断
                if(mouseX >= parent.width) mouseX = parent.width - 1
                if(mouseY >= parent.height) mouseY = parent.height - 1
                if(mouseX < 0) mouseX = 0
                if(mouseY < 0) mouseY = 0
                // 设置值
                _curMouseRow = parseInt(mouseY / tableContent.rowHeightProvider(0)) > plateRowCount ?
                            plateRowCount : parseInt(mouseY / tableContent.rowHeightProvider(0))
                _curMouseCol = parseInt(mouseX / tableContent.columnWidthProvider(0)) > plateColCount ?
                            plateColCount : parseInt(mouseX / tableContent.columnWidthProvider(0))
                _endPoint = [_curMouseRow, _curMouseCol]
                _isPressed = false
            }
        }

        Component.onCompleted: {
            root.tableModels = [
                        {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": "", "I": "", "J": "", "K": "", "L": ""}
                    ]
        }
    }
}
